<script lang="ts" setup>
import { ApiConfigForm, KeyValues } from '../../../utils/types';
import { IStepForm, useConfig } from '../utils';
import UiUrlConfig from './UrlConfig.vue';
import UiParamConfig from './ParamConfig.vue';
import UiExtendSettings from './ExtendSettings.vue'
import { throwError, treeUtil } from '../../../utils';
import { computed } from 'vue';

const cls = 'ui-api-editor-service-config'

const props = defineProps<{ modelValue: ApiConfigForm }>()

const { isPutOrPost, isTree } = useConfig(props)

const validate = async () => {
  const row = treeUtil.find({
    data: [
      ...props.modelValue.serviceHeader,
      ...props.modelValue.serviceParam,
      ...props.modelValue.servicePath,
      ...props.modelValue.serviceBody
    ],
    callback: node => !node.param || (!node.paramType&&node.paramType!=0)
  })
  if (row) {
    return throwError('请完善入参定义')
  }
}
defineExpose<IStepForm>({
  getForm: () => props.modelValue.value,
  validate
})

const getOption = ( re:KeyValues[], se:KeyValues[] )=>{
  return re.filter( _ =>{
    return !se.find( v => {
      return v.param === _.param
    })
  })
}

const HeaderOption = computed(()=>{
  return getOption( props.modelValue.requestHeader, props.modelValue.serviceHeader )
})
const paramOption = computed(()=>{
  return getOption( props.modelValue.requestParam, props.modelValue.serviceParam )
})
const pathOption = computed(()=>{
  return getOption( props.modelValue.requestPath, props.modelValue.servicePath )
})
const bodyOption = computed(()=>{
  return isTree? props.modelValue.requestBody: getOption( props.modelValue.requestBody, props.modelValue.serviceBody )
})

</script>

<template>
  <div :class="cls">
    <ElForm label-width="8em" label-suffix=" :">
      <ElFormItem label="后端类型">HTTP(s)服务</ElFormItem>
      <ElFormItem label="后端服务地址">
        <UiUrlConfig v-model="props.modelValue" />
      </ElFormItem>
      <UiExtendSettings v-model="props.modelValue" />
      <ElFormItem label="请求方式">{{ props.modelValue.method }}</ElFormItem>
      <ElFormItem v-if="isPutOrPost" label="请求类型">{{ props.modelValue.requestType }}</ElFormItem>
      <ElFormItem :class="`${cls}_params`" label="后台参数配置">
        <ElTabs>
          <ElTabPane label="Header">
            <UiParamConfig :optionValue="HeaderOption" v-model="props.modelValue.serviceHeader" />
          </ElTabPane>
          <ElTabPane label="Param">
            <UiParamConfig :optionValue="paramOption" v-model="props.modelValue.serviceParam" />
          </ElTabPane>
          <ElTabPane label="Path">
            <UiParamConfig :optionValue="pathOption" v-model="props.modelValue.servicePath" />
          </ElTabPane>
          <ElTabPane v-if="isPutOrPost" label="Body">
            <UiParamConfig :isTree="isTree" :optionValue="bodyOption" v-model="props.modelValue.serviceBody" />
          </ElTabPane>
        </ElTabs>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<style lang="scss">
.ui-api-editor-service-config {
  &_params {
    flex-wrap: wrap;
    .el-form-item__content {
      flex: auto;
      width: 100%;
      padding: 0 $page-padding;
      margin-top: 10px;
    }
    .el-tabs {
      width: 100%;
    }
    .cell {
      padding: 0 6px;
      display: flex;
      align-items: center;
    }
    &_row {
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 10px;
      align-items: center;
      width: 100%;
      .el-table{
        overflow: visible;
      }
      &_serviceParams {
        width: 800px
      }
      &_requstParams {
        width: 740px
      }
      &_constant {
        width: 160px
      }
      &_authenticationPlugin {
        width: 430px
      }
      &_systemParameter {
        width: 430px
      }
    }
  }
  &_actions {
    width: 100%;
    margin-top: $page-padding;
    text-align: center;
  }
}
</style>
